<template>
  <div class="aboutOuter" :style="{ background: `url(${bgImg}) no-repeat`, backgroundSize: 'cover' }">
    <HeaderPage :headerNavindex="6" />
    <FooterPage :fixed="true" />

    <div class="about">
      <div class="about_img">
        <img :src="avatar" alt="头像">
      </div>
      <h2 class="about_title">楠寻</h2>
      <div class="about_text">
        {{aboutData.speak}}
      </div>
      <div class="hzylx">
        <ul class="summary">
          <li>
            <span>文章</span>
            <span>{{total.article}}</span>
          </li>
          <li>
            <span>标签</span>
            <span>{{total.tag}}</span>
          </li>
          <li>
            <span>分类</span>
            <span>{{total.category}}</span>
          </li>
        </ul>
        <ul class="contact">
          <el-tooltip class="box-item" effect="dark" :content="'个人仓库：'+aboutData.git
          " placement="top">
            <li><i class="iconfont icon-git"></i></li>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" :content="'邮箱：'+aboutData.eMail
          " placement="top">
            <li><i class="iconfont icon-youxiang"></i></li>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" :content="'QQ：'+aboutData.qq
          " placement="top">
            <li><i class="iconfont icon-qq"></i></li>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" :content="'公众号：'+aboutData.publicAccount
          " placement="top">
            <li><i class="iconfont icon-gongzhonghao"></i></li>
          </el-tooltip>
        </ul>
      </div>
      <div class="about_tags">
        <h3>个人技能</h3>
        <div class="about_tags_list">
          <div class="about_tags_item" v-for="(item,index) in aboutData.skill
          " :key="index">
            {{item}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';

import HeaderPage from '../../components/HeaderPage.vue';
import FooterPage from '../../components/FooterPage.vue';

import { findImgApi } from '../../service/apiModule/bgImgApi'
import { findAboutApi } from '../../service/apiModule/aboutApi'
import { getArticleNumApi } from '../../service/apiModule/articleApi'
import { getTagNumApi } from '../../service/apiModule/tagApi'
import { getCategoryNumApi } from '../../service/apiModule/categoryApi'

onMounted(() => {
  getBgImg()
  getAbout()
  getArticleNum()
  getTagNum()
  getCategoryNum()
})

const bgImg = ref('')
const avatar = ref('')

// 获取背景
const getBgImg = async () => {
  const { data: res } = await findImgApi()
  if (res.status.code !== 200) {
    bgImg.value = ''
  } else {
    res.data.forEach((item: any) => {
      if (item.bgTitle === '关于背景') {
        bgImg.value = item.imgSrc
      }
      if (item.bgTitle === '用户头像') {
        avatar.value = item.imgSrc
      }
    })
  }
}

// 关于
const aboutData = reactive({
  git: '',
  eMail: '',
  qq: '',
  publicAccount: '',
  skill: '',
  speak: ''
})

// 获取关于信息
const getAbout = async () => {
  const { data: res } = await findAboutApi()
  res.data.forEach((item: any) => {
    switch (item.title) {
      case '个人仓库':
        aboutData.git = item.content
        break
      case '邮箱':
        aboutData.eMail = item.content
        break
      case 'qq':
        aboutData.qq = item.content
        break
      case '公众号':
        aboutData.publicAccount = item.content
        break
      case '主要技能':
        aboutData.skill = item.content.split(',')
        break
      case '一句话':
        aboutData.speak = item.content
        break
    }
  })
  console.log(aboutData)
}

const total = reactive({
  article: 0,
  tag: 0,
  category: 0
})

// 获取文章总数
const getArticleNum = async () => {
  const { data: res } = await getArticleNumApi()
  total.article = res.data.total
}

// 获取标签总数
const getTagNum = async () => {
  const { data: res } = await getTagNumApi()
  total.tag = res.data.total
  console.log(res)
}

// 获取分类数量
const getCategoryNum = async () => {
  const { data: res } = await getCategoryNumApi()
  total.category = res.data.total
}


</script>

<style lang="scss" scoped>
.aboutOuter {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  color: white;
  padding-top: 80px;
  position: relative;
  top: 0;

  .about {
    width: 60%;
    min-height: 300px;
    border-radius: 20px;
    background-color: rgba(88, 88, 88, 0.7);
    margin: 0 auto;
    margin-top: 100px;
    color: rgb(232, 232, 232);
    position: relative;
    padding: 60px 20px 10px 20px;

    .about_img {
      width: 100px;
      height: 100px;
      overflow: hidden;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 0px;
      transform: translate(-50%, -50%);

      img {
        width: 100%;
        height: 100%;
      }
    }

    .about_title {
      font-weight: 500;
      font-size: 30px;
      text-align: center;
      color: #fff;
    }

    .hzylx {
      width: 70%;
      margin: 0 auto;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;

      .summary {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #fff;

        li {
          display: flex;
          flex-direction: column;
          align-items: center;

          &:not(:last-child) {
            margin-right: 20px;
          }

          span {
            &:first-child {
              display: inline-block;
              border-bottom: 2px solid #ffc19a;
              padding-bottom: 3px;
              margin-bottom: 6px;
            }

            &:last-child {
              font-size: 12px;
              color: #ff8e48;
            }
          }
        }
      }

      .contact {
        display: flex;
        align-items: center;

        li {
          border-radius: 50%;
          padding: 10px;
          background-color: rgba(6, 0, 175, .4);
          cursor: pointer;

          &:not(:last-child) {
            margin-right: 20px;
          }
        }
      }
    }

    .about_text {
      font-size: 14px;
      text-align: center;
      margin-top: 20px;
    }

    .about_tags {
      margin-top: 30px;


      h3 {
        text-align: center;
        font-size: 30px;
        font-weight: 300;
        color: #fff;
        margin-bottom: 20px;
      }

      .about_tags_list {
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .about_tags_item {
          background-color: beige;
          color: #000000;
          text-align: center;
          border-radius: 100px;
          padding: 4px 20px;
          margin-right: 20px;
          margin-bottom: 20px;
          cursor: pointer;
        }
      }

    }
  }
}
</style>